<template>
  <div class="container">
    <div style="margin: 25px 0 25px 0">
      <!-- 分类查询 -->
      <el-form>
        <el-form-item>
          <el-select v-model="alllist" style="width: 120px" placeholder="所有">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :value="item.type"
              :label="item.title"
            ></el-option>
          </el-select>
          <!-- 搜索框 -->
          <el-input
            v-model="inputValue"
            placeholder="请输入内容"
            class="this-input"
            style="margin-left: 5px; width: 200px"
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button
            @click="upClick"
            type="primary"
            icon="el-icon-search"
            style="margin-left: 15px"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        style="width: 100%"
      >
        <el-table-column prop="image" label="用户头像" width="180">
        </el-table-column>
        <el-table-column prop="username" label="昵称" width="180">
        </el-table-column>
        <el-table-column prop="name" label="真实姓名"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="openId" label="微信授权"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "../../utils/request";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      total: 0, // 总条数
      inputValue: "",
      typeList: [
        { type: "all", title: "所有" },
        { type: "username", title: "昵称" },
        { type: "name", title: "真实姓名" },
        { type: "phone", title: "电话" },
      ],
      alllist: "all",
    };
  },
  // 点击事件
  methods: {
    // 分页功能
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 查询功能
    upClick() {
      if (this.alllist == "all") {
        service.get(`/user`).then((res) => {
          this.tableData = res.rows;
        });
      } else {
        service
          .get(`/user?value=${this.inputValue}&type=${this.alllist}`)
          .then((res) => {
            this.tableData = res.rows;
            this.total = res.total;
            this.inputValue = "";
          });
      }
    },
  },
  // 数据渲染
  mounted() {
    service.get(`/user`).then((res) => {
      this.tableData = res.rows;
    });
  },
};
</script>

<style scoped>
.container {
  padding: 0 20px;
}
/* 分页 */
.container .el-pagination {
  margin: 20px auto;
}
</style>